<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="90px">
        <div>
          <el-form-item label="体检编号">
            <el-input v-model="searchForm.orderNo" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户姓名">
            <el-input v-model="searchForm.customerName" clearable></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="searchForm.sex">
              <el-option v-for="item in optionsSex" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻">
            <el-select v-model="searchForm.marriage">
              <el-option v-for="item in optionsMarriage" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位名称">
            <el-input v-model="searchForm.enterpriseName" clearable></el-input>
          </el-form-item>
          <el-form-item label="课题人员">
            <el-checkbox v-model="topicCustomer"></el-checkbox>
          </el-form-item>
          <el-form-item label="二级部门">
            <el-input v-model="searchForm.twoLevelDeptName" clearable></el-input>
          </el-form-item>
          <el-form-item label="合同名称">
            <el-input v-model="searchForm.contractName" clearable></el-input>
          </el-form-item>
          <el-form-item label="体检日期">
            <el-date-picker
                v-model="checkDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="缴费状态">
            <el-select v-model="searchForm.payStatus" clearable>
              <el-option label="未缴费" :value="0"></el-option>
              <el-option label="已缴费" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchForm.queryOrderStatus">
              <el-option v-for="(v, i) in orderStatus" :key="i" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <el-table
          ref="multipleTable"
          :data="tableDatalist"
          tooltip-effect="dark"
          style="width: 100%"
      >
       <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="orderNo"
            label="体检单号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="customerName"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="60">
          <template slot-scope="scope">{{ scope.row.sex|formatSex }}</template>
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄"
            width="60">
        </el-table-column>
        <el-table-column prop="telephone" label="联系方式" width="120"></el-table-column>
        <el-table-column prop="enterpriseName" label="单位名称" width="150"></el-table-column>
        <el-table-column prop="contractName" label="合同名称" width="150"></el-table-column>
        <el-table-column prop="groupName" label="体检分组" width="150"></el-table-column>
        <el-table-column prop="packageCustomname" label="体检套餐" width="150"></el-table-column>
        <el-table-column prop="signDatetime" label="体检日期" width="150">
          <template slot-scope="scope">{{ scope.row.signDatetime|formatDate }}</template>
        </el-table-column>
        <el-table-column prop="" label="登记" width="150">
          <template slot-scope="scope">{{ scope.row.signDatetime|formatDate }}</template>
        </el-table-column>
        <el-table-column prop="" label="交表" width="150">
          <template slot-scope="scope">{{ scope.row.receiveFormTime|formatDate }}</template>
        </el-table-column>
        <el-table-column prop="" label="初检" width="150">
          <template slot-scope="scope">{{ scope.row.verifyTime|formatDate }}</template>
        </el-table-column>
        <el-table-column prop="reviewTime" label="复检" width="150">
          <template slot-scope="scope">{{ scope.row.reviewTime|formatDate }}</template>
        </el-table-column>

        <el-table-column prop="status" label="报告状态" width="150">
          <template slot-scope="scope">{{ scope.row.status|formatStatus }}</template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="toResult(scope.row)">查看结果</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import crumbs from "../../views/Crumbs.vue";
import userinfos from "../common/userinfos.vue";
import {optionsSex, optionsMarriage, customerStatus, orderStatus2} from "@src/common/utils/constant";
import { formatTimeToStr } from "../../common/utils/date.js";



export default {
  components: {
    crumbs,
    userinfos,
  },
  data() {
    return {
      orderStatus: orderStatus2,
      options: customerStatus,
      optionsSex: optionsSex,
      optionsMarriage: optionsMarriage,
      BreadCrumb: [{
        path: "",
        name: "检前管理"
      },
        {
          path: "/front/contract",
          name: "体检查询"
        },
      ],
      checkDate:[
        formatTimeToStr(new Date(new Date().setMonth(new Date().getMonth() - 1)), "yyyy-MM-dd"),
        formatTimeToStr(new Date(), "yyyy-MM-dd")
      ],
      dialogFormVisible: false,
      searchForm: {},
      pageSize:10,
      pageNo:1,
      tableDatalist: [],
      checkList: [],
      topicCustomer:false,
    };
  },
  filters:{
    formatSex: function (val) {
      var dict = {1: "男", 2: "女"}
      return dict[val]
    },
    formatType: function (val) {
      var dict = {1: "普通体检", 2: "单位体检", 3: "入职体检", 4: "职业体检", 5: "婚育体检", 6: "老年专项体检", 7: "健康体检等"}
      return dict[val]
    },
    formatStatus: function (val) {
      var dict = {1: "未登记", 2: "登记", 4: "检中", 8: "交表", 16: "初检", 32: "复检", 64: "打印"}
      return dict[val]
    },
    formatDate: function (time) {
      if (time != null && time !== "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
    formatCustomerStatus: function (val) {
      const dict = {}
      customerStatus.forEach(v=>{
        dict[v.value] = v.label
      })
      if(dict[val] !== undefined){
        return dict[val]
      }
      return "未知"
    },
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      if(this.checkDate && this.checkDate.length===2){
        this.searchForm.startCreateTime = formatTimeToStr(this.checkDate[0], "yyyy-MM-dd")
        this.searchForm.endCreateTime = formatTimeToStr(this.checkDate[1], "yyyy-MM-dd")
      }else {
        delete this.searchForm.startCreateTime
        delete this.searchForm.endCreateTime
      }
      this.searchForm.topicCustomer = this.topicCustomer?1:0
      // if(this.checkList.length>0){
      //   this.searchForm.queryOrderStatus = this.checkList
      // }else {
      //   delete this.searchForm.queryOrderStatus
      // }
      this.doGetList(this.searchForm)
    },
    doGetList(req){
      this.$axios.getOrderStatusReportList(req).then(res=>{
        this.tableDatalist = res.data.records
        this.total=res.data.total
      })
    },
    toResult(row) {
      this.$router.push({name: "visitphysician_result", query: {ordersId: row.orderNo}});
    },
    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
  },
};
</script>

<style scoped>

</style>
